<!-- 各个分类 -->
<template>
<div class="ref-goods">
<div class="head">
    <h3>-{{ title }}-</h3>
    <p class="tag">温暖柔软，品质之选</p>
</div>

<div class="body">
    <CateGoryGoodsItem v-for="item in goods" :item="item" :key="item.id"/>
</div>
</div>
</template>

<script>
import CateGoryGoodsItem from './category-goods-item.vue';
export default{
    name:"CateGoryGoods",
    components:{ CateGoryGoodsItem },
    props:{
        // 以下两种写法都可以，指定参数类型
        goods:{
            type:Array,
        },
        title:String,
    }

}
</script>

<style lang="less">
.ref-goods {
	background-color: #fff;
	margin-top: 20px;
	position: relative;
	.head {
		.tag {
			text-align: center;
			color: #999;
			font-size: 20px;
			position: relative;
			top: -20px;
		}
		.xtx-more {
			position: absolute;
			top: 20px;
			right: 20px;
			span {
				font-size: 16px;
				vertical-align: middle;
				margin-right: 4px;
				color: #999;
			}
			i {
				font-size: 14px;
				vertical-align: middle;
				position: relative;
				top: 2px;
				color: #ccc;
			}
		}
	}
	.body {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 65px 30px;
	}
}
</style>